<extend name="Public/base"/>

<block name="body">
    <div class="main-title">
        <h2>
            <eq name="item_id" value="0">
                商品浏览一览表
                <else/>
                <i class="text-success">{$item_id|get_item_name}</i> 浏览统计
            </eq>
        </h2>
    </div>

    <!-- 按钮工具栏 -->
    <div class="cf">
        <div class="fl">
            <eq name="item_id" value="0">
                <a class="btn" target="_blank" href="{:U('',array('export' => 1, 'sort' => I('get.sort'), 'start_time' => I('get.start_time'), 'end_time' => I('get.end_time')))}">导出</a>
            </eq>
            <a class="btn" href="{:U()}">刷 新</a>
        </div>
    </div>
    <!-- 数据表格 -->
    <div class="data-table table-striped">
        <table>
            <thead>
            <tr>
                <th width="80">商品ID</th>
                <th>商品编号</th>
                <th>商品类别</th>
                <th>商品名称</th>
                <th>浏览次数</th>
                <eq name="item_id" value="0">
                    <th width="100">操作</th>
                </eq>
            </tr>
            </thead>
            <tbody id="lists">
            <volist name="stat" id="vo">
                <tr>
                    <td>{$vo.id}</td>
                    <td><a href="{:U('/Item/detail?id='.$vo['id'])}" target="_blank" title="点击商品信息">{$vo.number}</a></td>
                    <td>{$vo.category}</td>
                    <td><a href="{:U('/Item/detail?id='.$vo['id'])}" target="_blank" title="点击商品信息">{$vo.name}</a></td>
                    <td>{$vo.viewnum}</td>
                    <eq name="item_id" value="0">
                        <td><a href="javascript:;" onclick="$('#item_id').val({$vo.id});$('#J_search_form').submit();">查看详情</a></td>
                    </eq>
                </tr>
            </volist>
            </tbody>
        </table>
    </div>
    <div class="chart-body">
        <div id="chart_box" ></div>
    </div>
    <div class="page">
        <ul>
            <li id="page"></li>
        </ul>
    </div>


</block>

<block name="script">
    <script language="javascript" type="text/javascript" src="__JS__/My97Date/WdatePicker.js"></script>
    <script language="javascript" type="text/javascript" src="__JS__/echarts/echarts-all.js"></script>
    <script type="text/javascript">
        $(function() {
            //搜索
            $("#search").click(function() {
                var url = $(this).attr('url');
                var query = $('.search-form').find("select,input").serialize();
                query = query.replace(/(&|^)(\w*?\d*?\-*?_*?)*?=?((?=&)|(?=$))/g, '');
                query = query.replace(/^&/g, '');
                url += query ? ((url.indexOf('?') > - 1 ? '&' : '?') + query) : '';
                window.location.href = url;
            });
            //回车自动提交
            $('.search-form').find('input').keyup(function(event) {
                if(event.keyCode === 13) {
                    $("#search").click();
                }
            });
            //导航高亮
            highlight_subnav("{:U('view')}");
            $('.date_select').focus(function() {
                WdatePicker({skin: 'twoer', dateFmt: 'yyyy-MM-dd', maxDate: '%y-%M-%d'});
            });
            //结束日期智能化判断
            if($('input[name="end_time"]').val() === "{$today}"){
                $('input[name="end_time"]').val("");
            }
            Core.setValue('sort', '{:I('get.sort', 'desc')}');
        });
    </script>

    <script type="text/javascript">
        //导航高亮
        highlight_subnav("{:U('view')}");
    </script>
    <script type="text/javascript">
        var data1 = '{$total_view}'-'{$viewnum[0]}';
        var data2 = data1-'{$viewnum[1]}';
        var data3 = data2-'{$viewnum[2]}';
        var data4 = data3-'{$viewnum[3]}';
        var data5 = data4-'{$viewnum[4]}';
        var data6 = data5-'{$viewnum[5]}';
        var data7 = data6-'{$viewnum[6]}';
        var data8 = data7-'{$viewnum[7]}';
        var data9 = data8-'{$viewnum[8]}';
        var data10 = data9-'{$viewnum[9]}';
        console.log('{$item[0]}');
        $('#chart_box').css({height:'600px',width:'1400px', marginTop:'50px'});
        $('#search-form').css({marginTop:'400px'});
        var myChart = echarts.init(document.getElementById('chart_box'));
        option = {
            title: {
                text: '商品浏览次数TOP10',
                subtext: '数据来自网络'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                data: [ '浏览次数']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                boundaryGap: [0, 0.01]
            },
            yAxis: {
                type: 'category',
                data : ['{$item[9]}','{$item[8]}','{$item[7]}','{$item[6]}','{$item[5]}','{$item[4]}','{$item[3]}','{$item[2]}','{$item[1]}','{$item[0]}']
            },
            series: [

                {
                    name: '浏览次数',
                    type: 'bar',
                    itemStyle: {
                        normal: {
                            barBorderColor: 'rgb(126 ,192, 238)',
                            color: 'rgb(126 ,192, 238)'
                        }

                    },
                    data:[ '{$viewnum[9]}', '{$viewnum[8]}', '{$viewnum[7]}', '{$viewnum[6]}', '{$viewnum[5]}','{$viewnum[4]}','{$viewnum[3]}','{$viewnum[2]}','{$viewnum[1]}','{$viewnum[0]}']
                }
            ]
        };


        myChart.setOption(option);
    </script>
</block>